<template>
  <view class="box">
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        style="margin: 10px 0"
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item
          class="label"
          label="车牌号码"
          required
          name="carNumber"
        >
          <uni-easyinput
            v-model="baseFormData.carNumber"
            placeholder="请输入车牌号码"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="所属部门" required name="deptId">
          <uni-data-select
            v-model="baseFormData.deptId"
            :localdata="range"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="核载人数" required name="seats">
          <uni-easyinput
            v-model="baseFormData.seats"
            placeholder="请输入核载人数"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="停放地点"
          required
          name="parkingLocation"
        >
          <uni-easyinput
            v-model="baseFormData.parkingLocation"
            placeholder="请输入停放地点"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="车钥匙保管人"
          required
          name="keeper"
        >
          <uni-easyinput
            v-model="baseFormData.keeper"
            placeholder="请输入车钥匙保管人"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="备注" required name="remarks">
          <uni-easyinput
            type="textarea"
            v-model="baseFormData.remarks"
            placeholder="请输入"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <uni-file-picker
      v-model="file"
      style="padding: 18px; background-color: #fff"
      title="车辆照片"
      :imageStyles="imageStyles"
      @select="select"
    ></uni-file-picker>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button
        style="margin: 20px 0"
        type="primary"
        @click="submit('baseForm')"
      >
        保存
      </u-button>
    </view>
  </view>
</template>

<script>
import { deptList, add } from "@/api/vehiclemanagement";
import { handleFileChange } from '@/utils';
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      file: [],
      list: [],
      imageStyles: {
        width: 110,
        height: 100,
      },
      // 表单数据
      baseFormData: {
        carNumber: "",
        deptId: "",
        seats: "",
        parkingLocation: "",
        keeper: "",
        remarks: "",
      },
      range: [],
      rules: {
        carNumber: {
          rules: [
            {
              required: true,
              errorMessage: "车牌号码不能为空",
            },
          ],
        },
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: "所属部门不能为空",
            },
          ],
        },
        seats: {
          rules: [
            {
              required: true,
              errorMessage: "核载人数不能为空",
            },
          ],
        },
        parkingLocation: {
          rules: [
            {
              required: true,
              errorMessage: "停放地点不能为空",
            },
          ],
        },
        keeper: {
          rules: [
            {
              required: true,
              errorMessage: "车钥匙保管人不能为空",
            },
          ],
        },
        remarks: {
          rules: [
            {
              required: true,
              errorMessage: "备注不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const res = await deptList();
    this.range = res.data[0].children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
  },

  mounted() {},

  methods: {
  async  select(e) {
      const blobUrl = await handleFileChange(e.tempFiles[0].file);
      uni.uploadFile({
        url: "http://192.168.3.55:1889/api/blade-resource/oss/endpoint/put-file-attach", //仅为示例，非真实的接口地址
        filePath: blobUrl,
        name: "file",
        formData: {
          // 'user': 'test'
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          this.file = [
            ...this.file,
            {
              fileName: data.data.originalName,
              fileUrl: data.data.link,
            },
          ];
        },
      });
    },
    add(type, index) {
      if (type === "add") {
        this.list.push({
          id: new Date().getTime(),
          num: this.list.length + 1,
          name: "",
        });
      } else {
        this.list = this.list.filter((item) => {
          return item.id !== index;
        });
      }
    },
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
        fileJson: JSON.stringify(this.file),
      };
      await add(value);
      uni.showToast({
        title: `保存成功`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    change() {},
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.example {
  background-color: #fff;
}
.label {
  padding: 0 12px 0 18px !important;
}
.bottom {
  margin-top: 10px;
  background-color: #fff;
}
.xin {
  width: 100%;
  margin-bottom: 10px;
  background-color: #fff;
  .xin_tab {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }
  .xin_con {
    width: 100%;
    padding: 10px;
    display: flex;
    .xin_con_label {
      line-height: 37px;
      width: 18%;
    }
  }
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
</style>